<style scoped>
.catebox h1 {font-weight:400;font-size:16px;padding: 3px 3px;}
.catebox ul {}
.catebox ul li {padding: 5px 0 7px 0;}
.catebox ul li .vbtns {display: none;}
.catebox ul li:hover .vbtns {display:inline-block;}
.catebox ul li.cur .font-blue {color:#f60 !important;}
.catebox ul li.catelevel0 {}
.catebox ul li.catelevel1 {padding-left: 24px;}
.catebox ul li.catelevel2 {padding-left: 48px;}
.catebox ul li.catelevel3 {padding-left: 72px;}
.catebox ul li.catelevel4 {padding-left: 96px;}
.catebox ul li.catelevel5 {padding-left: 120px;}
.catebox .inlist {border:solid 1px #f1f1f1;padding: 9px 22px;}
</style>
<template>
<div class="catebox">
  <Spin size="large" fix v-if="loading"></Spin>
  <div class="inlist">
    <ul>
      <li :class="'catelevel0 ' + (curid == 0 ? 'cur' : '')"><a href="javascript:void(0)" class="f16 fb" @click.stop="selectItem({id: 0})">全部</a></li>
      <li v-for="(item, index) in data" :key="index" :class="'catelevel' + item.level + ' ' + (curid == item.id ? 'cur' : '')" v-if="(!item.show || item.show == 1 || item.click == 1)">
        <template v-if="item.edit && item.edit == 1">
          <Input v-model="item.name" style="width: 120px;" placeholder="名称" />
          <Input v-model="item.sort" style="width: 30px;" placeholder="序号" />
          <div class="dis5"></div>
          <Button type="primary" @click.stop="cateSave(index, item)" size="small" shape="circle" icon="md-checkmark"></Button>
          <Button type="default" @click.stop="cancelEdit(index, item)" size="small" shape="circle" icon="md-close"></Button>
        </template>
        <template v-else>
          <a href="javascript:void(0)" @click.stop="selectItem(item)">
            <span class="f16 font-blue" v-if="item.has_children && item.has_children > 0">
              <Icon style="cursor:pointer;" @click.stop="showHideChild(item)" :type="'ios-arrow-' + (item.show == 2 ? 'up' : 'down')" />
              {{ item.name }}</span>      
            <span class="f16 font-blue" v-else>{{ item.name }}</span>
            <span class="font-gray2 f12" v-if="item.nums > 0"> ({{ item.nums }}) </span>
            <span class="fr vbtns">
              <Button @click.stop="addItem(index + 1, item.id, item.level + 1)"  type="primary" size="small" shape="circle" icon="md-add" v-if="item.level < 2"></Button>
              <Button @click.stop="editItem(item)"  type="default" size="small" shape="circle" icon="md-create"></Button>
              <Button @click.stop="delItem(index, item)"  type="default" size="small" shape="circle" icon="md-close"></Button>
            </span>
          </a>
        </template>
      </li>
    </ul>
    <div class="dis20"></div>
    <div><Button @click="addItem(data.length, 0, 0)"  type="primary" shape="circle" icon="md-add"></Button>
        <Button @click="getcate"  type="default" shape="circle" icon="md-refresh"></Button></div>
    <div class="dis20"></div>
  </div>
</div>
</template>
<script>
  export default {
    props: ['url'],
    data () {
      return {
        data: [],
        loading: false,
        curid: 0
      }
    },
    mounted () {
      this.baseUrl = this.url || '/upload'
      this.getcate()
    },
    methods: {
      selectItem (item) {
        this.curid = item.id
        this.$emit('selectItem', item)
      },
      getcate () {
        let that = this
        that.loading = true
        that.$ajax.get(that.baseUrl + '/cate_list').then((res) => {
          if (res.status === 1) {
            that.data = res.data
          }
          that.loading = false
        })
      },
      cateSave (index, item) {
        let that = this
        that.$ajax.post(that.baseUrl + '/cate_edit', item).then((res) => {
          if (res.status === 1) {
            that.$set(item, 'edit', 0)
            that.$set(item, 'id', res.data)
          }
        })
      },
      cancelEdit (index, item) {
        if (item.id > 0) {
          this.$set(item, 'edit', 0)
        } else {
          this.data.splice(index, 1)
        }
      },
      showHideChild (item) {
        let pid = -1
        let show = 0
        for (let i in this.data) {
          if (this.data[i].id === item.id) {
            pid = item.pid
            show = (!item.show || item.show === 1) ? 2 : 1
            this.$set(this.data[i], 'show', show)
            continue
          }
          if (pid === this.data['pid']) {
            break
          } else {
            this.$set(this.data[i], 'show', show)
          }
          this.$set(this.data[i], 'click', 0)
        }
        this.$set(item, 'click', 1)
      },
      delItem (index, item) {
        let that = this
        if (confirm('您确定要删除改分组吗? 删除后不可恢复')) {
          that.$ajax.post(that.baseUrl + '/cate_del', item).then((res) => {
            if (res.status === 1) {
              this.data.splice(index, 1)
            }
          })
        }
      },
      editItem (item) {
        this.$set(item, 'edit', 1)
      },
      addItem (index, pid, level) {
        let that = this
        that.data.splice(index, 0, {
          id: 0,
          pid: pid,
          name: '',
          level: level,
          sort: 0,
          edit: 1
        })
      }
    }
  }
</script>
